<template>
    <van-popup class="modal-transparent" v-model:show="show" :close-on-click-overlay="false" teleport="body">
        <div class="modal-close">
            <div class="icon" @click="close"></div>
        </div>
        <div class="modal-container">
            <div class="title">{{$t("Today's withdrawal application is full, upgrade the membership benefits, can withdraw immediately")}}!</div>
            <div class="main">
                <div class="level">
                    <div class="level-0">
                        <div class="title">LV.0</div>
                        <div class="content">{{$t('My level')}}</div>
                        <div class="footer-text">NON</div>
                    </div>
                    <div class="level-update"></div>
                    <div class="level-1">
                        <div class="title">LV.1</div>
                        <div class="content">{{$t('Withdrawal')}}</div>
                        <div class="footer-text">VIP</div>
                    </div>
                </div>
                <div class="button" @click="submit">
                    <span>{{$t('Go to upgrade')}} ></span>
                </div>
            </div>
        </div>
        
    </van-popup>
</template>
<script>
import { inject } from 'vue'
export default {
    props:['show'],
    setup(props,ctx) {
        const vueState = inject('vueState')
        const close = ()=>{
            ctx.emit('update:show',false)
        }
        const submit = ()=> {
            ctx.emit('submit')
        }
        return {
            vueState,
            close,
            submit
        }
    }
}
</script>
<style lang="less" scoped>
.coin-num{
    display: inline-block;
    background: url(../../assets/images/icon_coin.svg) no-repeat left center;
    background-size: .2rem .2rem;
    padding-left:.22rem;
    font-size:.17rem;
    font-weight: 500;
    color: #F94200;
    line-height: .24rem;
    vertical-align: middle;
}
.rupee-color{
    color: #657221;
}
.high-light{
    color:#F94200;
}
.modal{
    &-close{
        display: flex;
        justify-content:flex-end;
        .icon{
            margin-bottom:.12rem;
            height: .3rem;
            width: .3rem;
            background: url(../../assets/images/Modal/modal_close_white.png) no-repeat center;
            background-size: contain;
        }
    }
    &-container{
        width: 3.11rem;
        background: url(../../assets/images/Modal/vip_modal_top.png) no-repeat top center;
        background-size: 100%;
        background-color: white;
        padding-top: 1.14rem;
        border-radius:.16rem;
        &>.title{
            font-size: .16rem;
            font-weight: 500;
            line-height: .28rem;
            color:#7F5C33;
            text-align: center;
            margin: 0 .2rem;
        }
        .main{
            margin-top: .12rem;
            padding-bottom: .32rem;
            background: url(../../assets/images/Modal/vip_modal_bottom.png) no-repeat bottom center;
            background-size: 100%;
            .level{
                padding:0 .33rem 0 .39rem;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                .title{
                    text-align: center;
                    font-family: Gilroy-Heavy;
                    color:#FF7747;
                    text-shadow: 0px 1px 2px 0px rgba(159,159,172,0.20); 
                }
                .content{
                    color:#FF7747;
                    font-weight: 500;
                    text-align: center;
                }
                .footer-text{
                    text-align: center;
                    color: white;
                    font-family: FZCuSong-B09S, FZCuSong-B09S-Regular;
                    font-weight: 400;
                }
                &-0{
                    height:.94rem;
                    width: .88rem;
                    background: url(../../assets/images/Modal/vip_level0.png) no-repeat center;
                    background-size: contain;
                    padding-top: .2rem;
                    .title{
                        font-size:.16rem;
                        line-height: .2rem;
                    }
                    .content{
                        font-size: .1rem;
                        line-height: .2rem;
                    }
                    .footer-text{
                        margin-top: .1rem;
                        font-size: .16rem;
                        line-height: .2rem;
                    }
                }
                &-1{
                    height:1.1rem;
                    width: 1.03rem;
                    background: url(../../assets/images/Modal/vip_level1.png) no-repeat center;
                    background-size: contain;
                    padding-top: .22rem;
                    .title{
                        font-size:.23rem;
                        line-height: .23rem;
                    }
                    .content{
                        font-size: .12rem;
                        line-height: .23rem;
                    }
                    .footer-text{
                        margin-top: .1rem;
                        font-size: .19rem;
                        line-height: .23rem;
                    }
                }
                &-update{
                    height: .3rem;
                    width: .3rem;
                    background: url(../../assets/images/Modal/vip_update.png) no-repeat center;
                    background-size: contain;
                    align-self: center;
                }
            }
            .button{
                margin: .37rem auto 0;
                height:.46rem;
                width: 2.6rem;
                background: #e9d0a2;
                border-radius: .7rem;
                box-shadow: 0px .09rem .23rem -.07rem rgba(233,208,162,0.50); 
                display: flex;
                align-items: center;
                justify-content: center;
                &>span{
                    font-size: .16rem;
                    font-weight: 700;
                    color:#7F5C33;
                }
            }
        }
    }
}
</style>